import React from 'react';
import ReactDOM from 'react-dom'

/**
 * 组件通信
 */
// class App extends React.Component{

//   render(){

//     return(
//       <div>
//      <p>{this.props.name}</p>
//     <p>{this.props.fn()}</p>
//     <p>{this.props.tag}</p>
//     </div>
//     )
//   }

// }

// ReactDOM.render(<App
//   name="张三"
//   stuNo={20437}
//   student={{name:"lisi",age:"18"}}
//   fn = {()=>{
//     return "这是一个箭头函数"
//   }}

//   tag={<h1>这是一个标签</h1>}

// />,document.getElementById("root"));



/**
 * 父子组件之间的通信 --- 回调函数
 */
// class Father extends React.Component{

//     state={
//       msg:"",
//     }
//     //
//     fn=(...data)=>{
//       console.log(data)
//       this.setState({
//         msg:data,
//       })
//     }
  
//     render(){
//       return(
//         <div>
//           {}
//           <p>{this.state.msg}</p>
//           <Child getChildMsg={this.fn}></Child>
//         </div>
//       )
//     }
//   }
  
//   class Child extends React.Component{
//     state={
//       msg: "传给父组件",
//       stuNo: 20437,
//       stuName: "张三"
//     }
//     btnClick =()=>{
//       this.props.getChildMsg(this.state.msg,this.state.stuNo,this.state.stuName)
//     }
  
//     render(){
//       return(
//         <button onClick={this.btnClick}>点击</button>
//       )
//     }
//   }
  
//   ReactDOM.render(<Father/>,document.getElementById("root"))
  
/**
 * 父子组件之间的通信 --- 回调函数
 */
// class Father extends React.Component{

//     state={
//       msg:[],
//     }
//     //
//     fn=(...data)=>{
//       console.log(data)
//       this.setState({
//         msg:data,
//       })
//     }
  
//     render(){
//         const element=[];
//         {this.state.msg.forEach((item)=>{
//           element.push(
//               <p>{item}</p>
//           )
//         })}
  
//       return(
//         <div>
//           {element}
//           <Child getChildMsg={this.fn}></Child>
//         </div>
//       )
//     }
//   }
  
//   class Child extends React.Component{
//     state={
//       msg: "传给父组件",
//       stuNo: 20437,
//       stuName: "张三"
//     }
//     btnClick =()=>{
//       this.props.getChildMsg(this.state.msg,this.state.stuNo,this.state.stuName)
//     }
  
//     render(){
//       return(
//         <button onClick={this.btnClick}>点击</button>
//       )
//     }
//   }
  
//   ReactDOM.render(<Father/>,document.getElementById("root"))
  
/**
 * 兄弟组件之间通信---->计数器
 * 
 */
class Child1 extends React.Component{

    render(){
      return(
      <p>计数：{this.props.countText}</p>
      )
    }
  
  }
  
  class Child2 extends React.Component{
    addButton=()=>{
      this.props.addnum();
    }
  
    render(){
      return(
        <button onClick={this.addButton}>+1</button>
      )
    }
  }
  
  class Father extends React.Component{
  
    state={
      count:0,
    }
  
    addParam=()=>{
      this.setState({
        count:this.state.count+1
      })
    }
  
    render(){
      return(
        <div>
          <h1>计数器：</h1>
          <Child1 countText={this.state.count}></Child1>
          <Child2 addnum={this.addParam}></Child2>
        </div>
      )
    }
  
  }
  
//   ReactDOM.render(<Father/>,document.getElementById("root"))
